<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉框示例</title>
	 <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
</head>
<body>
	<h2>提示框。源自jquery的<a href="https://github.com/sandywalker/webui-popover" target="_blank">webui-popover</a>插件。</h2>
    <h3>说明:</h3>
	<span>提示框（popover）是在某元素上显示一个提示说明界面。</span>
	<br>
	<h3>如：</h3>
    <div class="demo-exp-code entry-content">
		<div class="use-prettyprint lang-html">
			点击<a id="pp" style="cursor: pointer;text-decoration-line: underline;">关于</a>显示HISUI说明
		</div>
		<script type="text/javascript" class="use-prettyprint">
			$(function(){
				//var ccObj=$HUI.popover('#pp',{title:'许可证关于',content:'统一常用前端组件库，统一开发界面风格'});
				$("#pp").popover({title:'HUI关于',content:'统一常用前端组件库，统一开发界面风格'});
			});
		</script>
	</div>
	<h3>手动触发提示</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint lang-html">
			点击弹出按钮,<a id="manualpp" style="cursor:pointer;text-decoration-line:underline;">关于</a>显示HISUI说明
			<a id="showPP" class="hisui-linkbutton">弹出</a>
			<a id="hidePP" class="hisui-linkbutton">隐藏</a>
		</div>
		<script type="text/javascript" class="use-prettyprint">
			$(function(){
				$("#manualpp").popover({
					trigger:'manual',placement:'top',title:'HUI关于',
					content:'HISUI是一款前端组件类库',//backdrop:true,
					delay:{show: null,hide:500}
				});
				$("#showPP").click(function(){
					$("#manualpp").popover('show');
				});
				$("#hidePP").click(function(){
					$("#manualpp").popover('hide');
				});
			});
			</script>
	</div>
  <div>
        <h3>提示组件的相关配置、事件、方法</h3>
        <table class="table">
            <tr class="protitle">
                <th>属性</th>
                <th>说明</th>
                <th>默认值</th>
                <th></th>
            </tr>
            <tr>
                <td>placement</td>
                <td>提示层弹出方位.
					auto,top,right,bottom,left,	top-right,top-left,bottom-right,bottom-left,<br>
					auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical</td>
                <td>'auto'</td>
                <td></td>
            </tr>
            <tr>
                <td>width</td>
                <td>提示层宽度,可以为数字</td>
                <td>'auto'</td>
                <td></td>
            </tr>
            <tr>
                <td>height</td>
                <td>提示层高度,可以为数字</td>
                <td>'auto'</td>
                <td></td>
            </tr>
            <tr>
                <td>trigger</td>
                <td>触发动作(click,hover,manual(手动控制),sticky(创建完显示);)</td>
                <td>'click'</td>
                <td></td>
            </tr>
            <tr>
                <td>animated</td>
                <td>动画效果('pop','fade')</td>
                <td>null</td>
                <td></td>
            </tr>
            <tr>
                <td>style</td>
                <td>样式('','inverse')</td>
                <td>''</td>
                <td></td>
            </tr>
            <!--<tr>
                <td>delay</td>
                <td></td>
                <td>'success'</td>
                <td></td>
            </tr>-->
            <tr>
                <td>cache</td>
                <td>如果为false则提示层将销毁或重建</td>
                <td>true</td>
                <td></td>
			</tr>
			<tr>
				<td>multi</td>
				<td>如果为true则允许界面同时显示多个提示层</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>arrow</td>
				<td>是否显示箭头</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>title</td>
				<td>提示层标题</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>content</td>
				<td>提示层内容</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>closeable</td>
				<td>是否显示关闭按钮</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>direction</td>
				<td>文字显示方向(ltr,rtl).默认ltr(左到右)</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>padding</td>
				<td>是否增加内容padding</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>type</td>
				<td>内容类型('html','iframe','async')</td>
				<td>'html'</td>
				<td></td>
			</tr>
			<tr>
				<td>url</td>
				<td>如果type为'html'时,url可以配置jQuery选择器,如果type为'async',则通过url加载内容)</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>backdrop</td>
				<td>如果backdrop为true时,弹出层将模态化打开</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>dismissible</td>
				<td>为true时按esc键或点击非提示层位置，关闭提示层</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>autoHide</td>
				<td>值为false或数字(1000=1s)</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>offsetTop</td>
				<td>弹出层与顶边偏移量</td>
				<td>0</td>
				<td></td>
			</tr>
			<tr>
				<td>offsetLeft</td>
				<td>弹出层与左边偏移量</td>
				<td>0</td>
				<td></td>
			</tr>
            <tr class="evttitle">
                <th>事件名</th>
                <th>说明</th>
                <th>入参</th>
                <th></th>
            </tr>
            <tr>
                <td>onShow</td>
                <td>显示时触发</td>
                <td>e,value</td>
                <td></td>
			</tr>
			<tr>
				<td>onHide</td>
				<td>隐藏时触发</td>
				<td>e,value</td>
				<td></td>
			</tr>
            <tr class="mthtitle">
                <th>方法名</th>
                <th>说明</th>
                <th>入参</th>
                <th>返回值</th>
            </tr>
            <tr>
                <td>options</td>
                <td>拿到配置项对象</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>show</td>
                <td>显示弹出层</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>hide</td>
                <td>隐藏弹出层</td>
                <td></td>
                <td></td>
			</tr>
			<tr>
				<td>destroy</td>
				<td>销毁弹出层</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>setContent</td>
				<td>修改弹出层内容</td>
				<td>value</td>
				<td>jquery对象</td>
			</tr>
        </table>
    </div>
  <prettyprint/>
</body>
</html>